<template>
	<view>
		<view style="width: 750upx;height: 176upx;">
			<image src="../../static/shangmen/bj.png" style="width: 750upx;height: 176upx;position: absolute;"></image>
			<view style="display: flex;" @click="shangyibu">
				<view style="position: absolute;display: flex;margin-left: 20upx;line-height: 176upx;">
					<!-- <image src="../../static/shangmen/29.png" style="width: 38upx;height: 38upx;margin-top: 72upx;"></image> -->
				</view>
				<view style="width: 750upx;height: 176upx;text-align: center;font-size: 36upx;line-height: 176upx;position: absolute;z-index: 1;color: #fff;">分类</view>
			</view>
		</view>
		<!-- f4f4f4 -->
		<view style="background: #f4f4f4;width: 750upx;padding-top: 20upx;padding-bottom: 0upx;">
			<!-- <view style="width: 100%;text-align: center;color: #333;padding: 16upx 0 30upx 0;font-size: 36upx;background: #fff;"> 分类 </view> -->
			<view style="display: flex;padding-top: 0upx;">
				<view class="top" style="width: 600upx;">
					<image src="../../static/5.png" class="top_image"></image>
					<input class="top_input" placeholder="请输入商品名称" @confirm="confirm_tap" confirm-type="search" @input="input_tap" />
				</view>
				<view @click="confirm_tap" style="font-size: 30upx;color: #999999;margin-top: 16upx;margin-left: 30upx;">搜索</view>
			</view>
		</view>
		<view class="page-body" :style="'height:'+height+'px'">
			<scroll-view class="nav-left" scroll-y :style="'height:'+height+'px'" :scroll-top="scrollLeftTop" scroll-with-animation>
				<!-- class="nav-left-item" -->
				<view  @click="categoryClickMain(index)" :key="index" :class="index==categoryActive?'actives nav-left-items':'activess nav-left-items'"
					v-for="(item,index) in classifyData">
					{{item.name}}
				</view>
			</scroll-view>
			<scroll-view class="nav-right" scroll-y :scroll-top="scrollTop" @scroll="scroll" :style="'height:'+height+'px'" scroll-with-animation>
				<view v-for="(foods,index) in classifyData" :key="index" class="box" style="min-height: 100vh;">
					<view style="padding: 20upx 10upx;width: 100%;font-size: 36rpx;text-align: center;color: #333333;">{{foods.name}}</view>
					<view style="box-sizing:border-box; padding: 10upx;width: 100%;font-size: 32upx;text-align: center;line-height: 100upx;color: #999;" v-if="foods.list.length == 0">暂无数据</view>
					<view :id="i==0?'first':''" class="nav-right-item" v-for="(item,i) in foods.list" :key="i" @click="cart(item.goods_id,item,i)">
						<image :src="item.image" style="margin-right: 20rpx;height: 154rpx;width: 154rpx; min-width: 154rpx;border-radius: 16rpx;" />
						<view class="" style="width: calc(100% - 165rpx);display: flex;flex-direction: column;justify-content: space-between;">
							<view style="font-family: Source Han Sans;color: #3D3D3D;font-size: 36rpx;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;text-overflow: ellipsis;">{{item.name}}</view>
							<!-- <view class=""  style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" v-if="item.name.length < 8">
								<view class="" style="display: flex;gap: 20rpx;">
									<view class="" v-for="attr in item.attr_list" v-show="!attr.$hidden" :key="attr.id" :class="{'attr_item' : !attr.$firstHidden}">
										{{attr.$firstHidden ? '...' : attr.attr_name}}
									</view>
								</view>
							</view> -->
							<view style="color: #E93131;font-size: 38rpx; line-height: 44rpx;" class="oppo" v-if="item.price">
								<text class="syht" style="font-size: 20rpx;">￥</text>
								<text style="margin: 0 2rpx;line-height: 1;">{{item.price}}</text>
								<text class="syht" style="font-size: 20rpx;">{{item.unit ? item.unit : '/起'}}</text>
							</view>
						</view>
						
						<!-- <view style="color: #999999;font-size: 26upx;" v-if="item.price != undefined">¥{{item.price}}</view> -->
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import classifyData from '../../common/classify.data.js';
	export default {
		data() {
			return {
				name: "wkiwi",
				height: 0,
				categoryActive: 0,
				scrollTop: 0,
				scrollLeftTop: 0,
				// scrollHeight: 0,
				// classifyData:classifyData,
				arr:[0,584,1168,1752,2336,2805,3274,3858,4442,4911,5380,5734,6203,6672,7017],//初始值，后边计算会根据手机适配覆盖
				leftItemHeight: 51,//49行会计算出新值进行覆盖
				navLeftHeight:0,//左边scroll-view 内层nav的总高度
				diff: 0,//左边scroll-view 内层nav的总高度与视口之差
				tabBarHeight:0,//如果此页面为Tab页面，自己改变高度值,,一般tab高度为51
				datas:[],
				classifyData:[],
				value_data:''
				
			}
		},
		created(){
			//如果你的分类数据为后台异步获取请	将下方代码放置你的数据回调中
			// this.$nextTick(()=>{
			// 	this.getHeightList();
			// })
		},
		onLoad: function () {
			// uni.setNavigationBarTitle({
			// 	title: '分类'
			// });
			// uni.setNavigationBarColor({
			// 	frontColor:"#ffffff",
			// 	backgroundColor:"#fff",
			// })
			this.height = (uni.getSystemInfoSync().windowHeight - this.tabBarHeight) - 100
		},
		onReady() {
			// this.getHeightList();
			this.goods_type_api()
		},
		onShow() {
			this.goods_type_api()
		},
		methods: {
			confirm_tap() {
				if( this.value_data != '' ) {
					// this.goods_type_api()
					uni.navigateTo({
						url:'../commodity_list/commodity_list?keyword='+this.value_data
					})
				}
			},
			input_tap(num) {
				this.value_data = num.detail.value
			},
			//分类列表
			goods_type_api(id) {
				var that = this
				that.$request(that.$Api.goods_type_api, {
					access_token:uni.getStorageSync('access_token'),
					city:uni.getStorageSync('city'),
					keyword:that.value_data,
				},"POST").then(res => {
					var datas = []
					for(let i=0;i<res.data.data.type.length;i++) {
						datas.push(res.data.data.type[i])
					}
					var arr = {
						name:'臻奢护',
						list:datas
					}
					var car = []
					for(let i=0;i<res.data.data.car.length;i++) {
						car.push(res.data.data.car[i])
					}
					var arrs = {
						name:'车生活',
						list:car
					}
					that.classifyData = res.data.data.list
					//that.classifyData = that.classifyData.concat(arr)
					that.classifyData = that.classifyData.concat(arrs)
					that.classifyData.forEach(foods=>{
						foods.list.forEach(item=>{
							if(item.attr_list && item.attr_list.length > 0){
								let len = 0;
								item.attr_list.forEach(attr =>{
									let beforeLen = len
									len += attr.attr_name.length
									// 规格名字 加起来超过8个长度则隐藏 其及之后的所有规格
									if(beforeLen <= 8 && len > 8){
										attr.$firstHidden = true
									}else if(len > 8) {
										
										attr.$hidden = true
										
									}
								})
							}
						})
					})
					that.$nextTick(()=>{
						that.getHeightList();
					})
				})
			},
			getHeightList(){
				let _this = this;
				let selectorQuery=uni.createSelectorQuery();
				selectorQuery.selectAll('.nav-left-item').boundingClientRect(function(rects) {
					console.log('rects',rects)
					_this.leftItemHeight  =  rects[0].height;
					_this.navLeftHeight = _this.leftItemHeight * classifyData.length;
					_this.diff =  _this.navLeftHeight - _this.height;
				});
				selectorQuery.selectAll('.box').boundingClientRect(function(rects) {
					let arr = [0];
					let top = 0;
					rects.forEach(function(rect){
	// 					rect.id      // 节点的ID
	// 					rect.dataset // 节点的dataset
	// 					rect.left    // 节点的左边界坐标
	// 					rect.right   // 节点的右边界坐标
	// 					rect.top     // 节点的上边界坐标
	// 					rect.bottom  // 节点的下边界坐标
	// 					rect.width   // 节点的宽度
	// 					rect.height  // 节点的高度
						top += rect.height;
						arr.push(top)
						})
						_this.arr = arr
					}).exec()
			},
			scroll(e) {
				let _this = this
				if(this.timeoutId){
					clearTimeout(this.timeoutId);
				}
				this.timeoutId = setTimeout(function(){ //节流
					// _this.scrollHeight = e.detail.scrollTop + 1 + _this.height/2;
					_this.scrollHeight = e.detail.scrollTop + 1;
					//+1不要删除，解决最后一项某种情况下翻到底部，左边按钮并不会切换至最后一个
					//若想使切换参考线为屏幕顶部请删除 _this.height/2
					for (let i = 0; i < _this.arr.length;i++) {
						let height1 = _this.arr[i];
						let height2 = _this.arr[i+1];
						if (!height2 || (_this.scrollHeight >= height1 && _this.scrollHeight < height2)) {
							_this.categoryActive = i;
							(_this.diff>0) && (_this.scrollLeftTop = Math.round((_this.categoryActive * _this.diff)/(classifyData.length-1)));
							return false;
						}
					}
					_this.categoryActive = 0;
					_this.timeoutId = undefined;
				}, 10)
			},
			categoryClickMain(index) {
				console.log('classifyData',this.classifyData[index])
				// return
				this.categoryActive = index;
				this.scrollTop == this.arr[index] ? this.scrollTop = this.scrollTop+1 : this.scrollTop = this.arr[index]//防止两次相等造成点击不触发滚动时间
			},
			cart (goods_id,item,index) {
				console.log('item1',item)
				if(item.id) {
					console.log('item2',item.id)
					uni.navigateTo({
						url:'../conserve_new/conserve_new?id='+item.id+'&categoryActive='+index
					})
				}else{
					console.log('22',item.key)
					if( !item.goods_id ) {
						console.log('33')
						uni.navigateTo({
							url:'../conserve/conserve?id='+item.key+'&categoryActive='+index
						})
					}else{
						console.log('44',item.key)
						uni.navigateTo({
							url:'../shop_details/shop_details?goods_id='+goods_id
						})
					}
				}
			}
		},
		components: {
		}
	}
</script>

<style>
	page{
		background: #F4F4F4;
	}
	.top_input{
		font-size: 28upx;
		color: #B9B9B9;
		margin-left: 24upx;
		height: 60upx;
		line-height: 60upx;
	}
	.top_image{
		width: 33upx;
		height: 33upx;
		margin-top: 14upx;
		margin-left: 20upx;
	}
	.top{
		width: 683upx;
		margin-left: 34upx;
		height: 60upx;
		background: #fff;
		/* background: #cf4052; */
		border-radius: 31upx;
		display: flex;
		/* padding-top: 200upx; */
	}
	.page-body {
		display: flex;
		background: #F4F4F4;
		overflow: hidden;
		margin-top: 20upx;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		width: 30%;
		background: #F4F4F4;
	}

	.nav-left-item {
		margin-left: 0upx;
		height: 45upx;
		/* border-right: solid 1px #f1f1f1; */
		/* border-bottom: solid 1px #f1f1f1; */
		font-size: 34upx;
		padding: 30upx 0;
		display: flex;
		align-items: center;
		/* justify-content: center; */
	}
	.nav-left-items {
		margin-left: 0upx;
		height: 132rpx;
		box-sizing: border-box;
		/* border-right: solid 1px #f1f1f1; */
		/* border-bottom: solid 1px #f1f1f1; */
		font-size: 34upx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #333;
	}
	
	.nav-left-item:last-child{
		border-bottom: none;
	}
	.nav-right {
		width: 70%;
		background: #fff;
		box-sizing: border-box;
	}
	.box {
		display: block;
		overflow: hidden;
		border-bottom: 20upx solid #f3f3f3;
		/* min-height: 100vh; */ 
		/*若您的子分类过少想使得每个子分类占满屏请放开上边注视 */
	}
	.box:last-child {
		border: none;
		min-height:100vh;
	}
	.nav-right-item {
		width: 100%;
		/* height: 220upx; */
		float: left;
		/* text-align: center; */
		padding: 12rpx;
		font-size: 34upx;
		background: #fff;
		display: flex;
		color: #000;
		box-sizing: border-box;
	}

	.nav-right-item image {
		width: 130upx;
		height: 130upx;
		border-radius: 10upx;
	}
	.actives{
		background: #FFFFFF;
		position: relative;
	}
	.actives::before {
		content: '';
		width: 8rpx;
		height: 40rpx;
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		background: #1C336B;
	}
	.active {
		color: #333;
		background: #fff;
		border-right: 0;
		border-left: 8upx solid #cf4052;
	}
	::-webkit-scrollbar {/*取消小程序的默认导航条样式*/
	   width: 0;
	   height: 0;
	   color: transparent;
	}
	.attr_item {
		font-size: 20rpx;
		color: #3D3D3D;
		font-weight: 300;
		padding: 2rpx 6rpx;
		border-radius: 4rpx;
		border: 1rpx solid rgba(0, 0, 0, 0.16);
		display: flex;
		align-items: center;
	}
</style>
